<template>
  <div class="hello">
<!--    <h1>{{ msg }}</h1>-->
<!--    vue基础-->
<!--    <test></test>-->
<!--    表单  父组件传值到子组件  number=5-->
    <myinput :number=10 @my-event="getMyEvent()" ref="news"></myinput>

    <input v-bind:value="msg">
    <!--    复选框  父级传值给子级 my-value  -->
    <mycheckbox :my-value="msg"></mycheckbox>
<!--    全局组件-->
<!--    <runoob></runoob>-->
<!--    组件-->
    <mycomponent>
      <p slot="header">header message</p>
    </mycomponent>
  </div>
</template>

<script>
import Test from '../components/Test'
import Myinput from '../components/Myinput'
import Mycheckbox from '../components/Mycheckbox'
import Myselect from '../components/Myselect'
import Mycomponent from '../components/Mycomponent'

//自定义全局组件
// Vue.component(runoob,{template:'<h1>自定义全局组件</h1>'})

export default {
  name: 'hello',
  components: {
    Test,
    Myinput,
    Mycheckbox,
    Myselect,
    Mycomponent
  },
  data () {
    return {
      msg: '欢迎来到菜鸟教程！'
    }
  },
  methods: {
    getMyEvent(){
      console.log('通过事件方式，开始接收子主键发送的参数值message '+this.$refs.news.message)
      console.log('获取自子组件的message2信息 '+this.$refs.news.message2)
    }
  }
}
</script>
